<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天天生鲜-登陆</title>
<!--添加自适应说明  width=device-width:设备宽度   initial-scale=1原始缩放比例为1.0，即网页初始大小占屏幕面积的100%。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<!--如果用户使用的IE浏览版本低于IE9,那么加载下面的JS文件-->
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="icon" href="images/copylogo.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/foot.css">
</head>

<body>
<div id="app">
	<!-- logo区区域 -->
	<div class="login_top">
    	<a href="index.html" class="login_logo"><img src="images/logo02.png"></a>
    </div>
	
	<!-- 内容区域 -->
    <div class="login_form_bg">
    	<div class="login_form_wrap clearfix">
        	<div class="login_banner fl"></div>
            <div class="slogn fl">日夜兼程 · 急速送达</div>	
            <div class="login_form fr">
                <div class="login_title	clearfix">
                    <h1 class="fl">用户登陆</h1>
                    <a href="register.html" class="fl">立即注册</a>
                </div>
				<!-- 登录区域 -->
                <div class="form_input clearfix">
                    <form>
						<ul>
                            <li>
                                <input type="text" v-model="obj.nickName" class="name_input" id="nickName" placeholder="昵称/邮箱/手机号码"/>
                                <div class="user_error">账号不能为空...</div>
                            </li>
                            <li>
                                <input type="password" v-model="obj.pwd" class="pwd_input" id="pwd" placeholder="请输入密码"/>
                                <div class="user_error">密码格式错误...</div>
                            </li>
                            <li>
                            	<div>
                                	<input type="text" v-model="obj.code" id="code" class="yzm_input" placeholder="请输入验证码"/>
                                	<img class="code" id="codeImage" src="getCode" onclick="this.src='getCode?' + new Date().getTime()"/>
                                </div>
                                <div class="user_error">验证码格式错误...</div>
                            </li>
                            <li>
                                <div class="more_input clearfix">
                                    <input type="checkbox" name="" id="remember">
                                    <label for="remember">记住用户名</label>
                                    <a href="#">忘记密码</a>
                                </div>
                            </li>
                            <li>
                               <input type="button" value="登录" class="submit_input" @click ="login">
                            </li>
                      	</ul>
                    </form>
                </div>
            </div>
         </div>
    </div>
</div>	
<!-- 版权所有-->
<div class="footer">
	<div class="foot_link">
    	<a href="#">关于我们</a><span> | </span>
    	<a href="#">联系我们</a><span> | </span>
    	<a href="#">招聘广告</a><span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy;  2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号</p>
</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/show-dialog.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/axios.js" type="text/javascript"></script>
<script src="js/qs.js" type="text/javascript"></script>
<script>
$(function(){
	$("#nickName").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});

	//聚焦事件
	$("#nickName").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
	
	$("#pwd").blur(function(){
		if ($.trim($(this).val()) == "") {
			$(this).next().css("visibility", "visible");
		}
	});

	//聚焦事件
	$("#pwd").focus(function(){
		$(this).next().css("visibility", "hidden");
	});
	
	$("#code").blur(function(){
		let code = $.trim($(this).val());
		if (code == "" || code.length != 4) {
			$(this).parent().next().css("visibility", "visible");
		}
	});

	//聚焦事件
	$("#code").focus(function(){
		$(this).parent().next().css("visibility", "hidden");
	});
		
})

let app = new Vue({
	el:"#app",
	data:{
		obj:{
			nickName:"",
			pwd:"",
			code:""
		}
	},
	methods:{
		login:function(){
			$("#nickName").blur();
			$("#pwd").blur();
			$("#code").blur();
			
			let divs = $(".user error");
			for(let i = 0 ,len = divs.length; i < len ; ++ i){
				if($(divs[i].css("visibility") != 'hidden')){
					return false;
				}
			}
			
			axios.post("member/login",qs.stringify(this.obj)).then(rt =>{
				if(rt.status == 200){
					if(rt.data.code == 200){ //登录成功
						let ref = document.referrer;//获取是从哪里跳过来的
						if(ref == "" || ref.indexOf("register.html") >0){//说明是直接访问登录界面或者从注册界面过来
							location.href="index.html";
						}else{
							location.href=ref;
						}
						return;
					}
					
					if(rt.data.code == 510){
						showmsg("验证码错误...","red");
						$("#codeImage").attr("src","getCode?" + new Date().getTime());
						return;
					}
					showmsg("账号或者密码错误，请确认后重新登录....");
					return;
				}
				showmsg("登录失败，请稍后重试...","red");
			})
		}
	}
})
</script>
</body>
</html>
